<template>
  <div class="index">
    <h3>父组件：</h3>
    <h4>我的存款：{{money}}</h4>
    <h4>我的座驾：{{car}}</h4>
    <h4>我的房子：{{house}}</h4>
    <h4>我的朋友：{{friend}}</h4>
    <button @click="money -= 10000">赔钱了</button>
    <button @click="friend.name = '程程呀' ">给朋友换名字</button>
    <button @click="friend = {name:'晶晶',age:900} ">换朋友</button>
    <Child/>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    name:'Index',
    components:{Child},
    data() {
      return {
        car:'奔驰',
        house:'大别墅',
        money:1000000,
        friend:{
          name:'海峰',
          age:18
        }
      }
    },
    provide(){
      return {
        che:this.car,
        fang:this.house,
        qian:this.money,
        pengyou:this.friend,
      }
    }
  }
</script>

<style lang="less" scoped>
  .index {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
</style>